<template>
  <view
    class="container"
    @click="emit('click')"
    :style="{
      border: checked ? 'none' : `1.5px solid ${backgroundColor}`,
      marginLeft: marginLeft,
      borderRadius: multiple ? 'none' : '50%'
    }"
  >
    <view :class="{ checked }" v-if="checked">
      <span>√</span>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const emit = defineEmits(['click'])
const props = defineProps({
  checked: {
    type: Boolean,
    default: false
  },
  size: {
    type: String,
    default: '32rpx'
  },
  color: {
    type: String,
    default: '#000'
  },
  backgroundColor: {
    type: String,
    default: '#ffc935'
  },
  marginLeft: {
    type: String,
    default: '20rpx'
  },
  multiple: {
    type: Boolean,
    default: false
  }
})

function getStyleValueUnit(value: string): string | null {
  const unitMatch = value.match(/[a-zA-Z%]+/)
  return unitMatch ? unitMatch[0] : null
}
// === style vars ===
const coreCircleFontSize = ref(parseFloat(props.size) * 0.6 + getStyleValueUnit(props.size)!)
console.log('==>', coreCircleFontSize.value)
</script>

<style scoped lang="scss">
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  width: v-bind(size);
  height: v-bind(size);
  line-height: v-bind(size);
  box-sizing: border-box;

  .checked {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-size: v-bind(coreCircleFontSize);
    font-weight: bold;
    text-align: center;
    color: v-bind(color);
    background-color: v-bind(backgroundColor);
  }
}
</style>
